<template>
  <div class="app-container">
    <div v-show="active === 1">
      <div class="searchform">
        <!-- 查询条件 -->
        <el-form ref="searchForm" :model="search" size="mini" label-width="90px">
          <el-row :gutter="6">
            <el-col :xs="24" :sm="8" :md="6">
              <el-form-item prop="seriesId" label="产品小类">
                <el-select v-model="search.seriesId" :clearable="true" placeholder="请选择" >
                  <el-option v-for="item in seriesId" :key="item.code" :label="item.name" :value="item.code">{{ item.name }}</el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="8" :md="6">
              <el-form-item prop="payMethod" label="订金支付方式">
                <r-select
                  v-model="search.payMethod"
                  :formatter="filterCode"
                  placeholder="请选择"
                  type="3222" />
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="8" :md="6">
              <el-form-item prop="clauseStatus" label="有效状态">
                <r-select
                  v-model="search.seriesStatus"
                  :formatter="filterCode"
                  placeholder="请选择"
                  type="1001"/>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="8" :md="6">
              <el-form-item prop="clauseStatus" label="启用/禁用">
                <r-select
                  v-model="search.status"
                  :formatter="filterCode"
                  placeholder="请选择"
                  type="1003"/>
              </el-form-item>
            </el-col>
            <div style="text-align:right">
              <el-button type="primary" icon="el-icon-search" @click="searchHandle">查询
              </el-button>
              <el-button icon="el-icon-refresh" @click="resetForm('searchForm')">重置
              </el-button>
            </div>
          </el-row>
        </el-form>
      </div>
      <!-- 表单表头信息 -->
      <div class="table">
        <div class="tableHead">
          <div class="tabletitle">订金支付维护</div>
          <el-button-group>
            <el-button type="primary" icon="el-icon-plus" @click="addClause()">新增</el-button>
          </el-button-group>
        </div>
        <BaseTable ref="table" @chaneg-size="changeSizeHandle" @chaneg-page="changePageHandle">
          <el-table-column type="index" label="序号" min-width="50"/>
          <el-table-column align="center" label="操作" min-width="100">
            <template slot-scope="scope">
              <el-tooltip class="item" content="编辑" placement="bottom">
                <el-button
                  type="text"
                  style="font-size: 20px;"
                  icon="el-icon-edit-outline"
                  @click="editaddClause(scope.row)"/>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column v-if="false" prop="payment_id" label="payment_id"/>
          <el-table-column prop="series_id" label="产品小类"/>
          <el-table-column prop="earnest_money" label="订金金额"/>
          <el-table-column :formatter="filterCode" prop="pay_method" label="订金支付方式" />
          <el-table-column v-if="true" :formatter="filterCode" prop="series_status" label="状态" type="1001"/>
          <el-table-column v-if="true" :formatter="filterCode" prop="status" label="启用/禁用" type="1003"/>
        </BaseTable>
      </div>
    </div>
    <!-- 新增div -->
    <!-- 弹框 -->
    <el-dialog v-dialogDrag v-if="dialogFormVisible" :title="earnestTitle" :visible.sync="dialogFormVisible" :close-on-click-modal="false" width="40%" >
      <div class="elform">
        <el-form ref="form" :model="form" :rules="rules" label-width="95px">
          <el-row :gutter="6">
            <el-col v-if="false">
              <el-form-item prop="payment_id" label="payment_id">
                <el-select v-model="form.payment_id" :clearable="true" placeholder="请选择" >
                  <el-option v-for="item in clauseType" :key="item.code" :label="item.name" :value="item.code">{{ item.name }}</el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="8" :md="10">
              <el-form-item prop="seriesId" label="产品小类" >
                <el-select v-model="form.seriesId" :clearable="true" :disabled="earnestTitle==='订金支付编辑'" placeholder="请选择" >
                  <el-option v-for="item in seriesId" :key="item.code" :label="item.name" :value="item.code" >{{ item.name }}</el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="8" :md="10">
              <el-form-item prop="earnestMoney" label="订金金额(元)" >
                <el-input v-model="form.earnestMoney" placeholder="请输入内容" clearable />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="8" :md="10">
              <el-form-item prop="status" label="禁用/启用">
                <r-select v-model="form.status" :formatter="filterCode" type="1003" clearable/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="6">

            <el-col :xs="24" :sm="8" :md="24">
              <el-form-item prop="payMethod" label="订金支付方式" >
                <el-checkbox-group v-model="checkList">
                  <el-checkbox label="32221001">线上支付</el-checkbox>

                  <el-checkbox label="32221002">门店支付</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button type="text">
          <i class="el-icon-search magnifier" />
        </el-button>
        <el-button v-show="saveBS" type="primary" @click="saveClause">保 存</el-button>
        <el-button @click="cancel()">取 消</el-button>
      </div>

    </el-dialog>
    <!-- //
    // -->
  </div>
</template>

<script>
import {
  getEarnest,
  addNewEarnest,
  editEarnest,
  selectById,
  findSeries
} from '@/api/admin/system_settings/gms/payment'
// import {
//   getUserInfoById
// } from '@/api/admin/org/gms/employeeInfo'
import Pagination from '@/components/Pagination'
import BaseTable from '@/components/BaseTable'
import BaseTableNoPage from '@/components/BaseTable/BaseTableNoPage'
import formMixins from '@/mixins/formMixins'
import rSelect from '@/components/Select/Select'
import filtercode from '@/components/Checkbox/filtercode'
import _ from 'lodash'
export default {
  name: 'Payment',
  components: {
    BaseTable,
    BaseTableNoPage,
    Pagination,
    rSelect,
    filtercode
  },
  mixins: [formMixins],
  data() {
    const validateNum = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入订金金额'))
      } else if (/^\d+(\.\d{1,2})?$/.test(value)) {
        callback()
      } else {
        callback(new Error('请填正确金额格式，可保留两位'))
      }
    }

    return {
      checkList: ['32221001'],
      active: 1,
      dialogFormVisible: false,
      earnestTitle: '',
      dialogType: '',
      saveBS: '',
      type: 0,
      search: {
        limit: 10,
        pageNum: 1,
        seriesId: '',
        payMethod: '',
        earnestMoney: 0,
        seriesStatus: 10011001,
        status: 10031001
      },
      // 车系
      seriesId: [],
      dialogVisible: false,
      rules: {
        seriesId: [{
          required: true,
          message: '请选择产品小类',
          trigger: 'blur'
        }],
        earnestMoney: [{
          required: true,
          validator: validateNum,
          trigger: 'blur'
        }],
        payMethod: [{
          required: true,
          message: '请选择支付方式',
          trigger: 'blur'
        }],
        status: [{ trigger: 'blur', required: true, message: '请选择启用/禁用' }]
      },
      form: {
        payment_id: '',
        seriesId: '',
        earnestMoney: 0,
        payMethod: '',
        status: 10031001
      }
    }
  },
  computed: {},
  watch: {
  },
  mounted() {
    this.searchHandle()
    this.searchSeries()
  },
  methods: {
    // 取消弹窗
    cancel() {
      this.dialogFormVisible = false
    },
    // 查询车系
    searchSeries() {
      findSeries().then(res => {
        this.seriesId = res
      }).catch(err => {
      })
    },
    // 查询
    searchHandle() {
      const table = this.$refs['table']
      const search = _.extend(this.search)
      table.wait()
      getEarnest(search).then(res => {
        table.complete().filData(res)
      }).catch(err => {
        table.complete()
      })
    },
    // 增加页面
    addClause() {
      this.resetForm('form')
      this.form.seriesId = ''
      this.form.earnestMoney = ''
      this.form.payMethod = ''
      this.form.status = 10031001
      this.saveBS = true
      this.dialogType = 'add'
      this.earnestTitle = '订金支付新增'
      this.checkList = ['32221001']
      this.dialogFormVisible = true
    },
    // 编辑
    async editaddClause(data) {
      this.saveBS = true
      this.dialogType = 'edit'
      this.earnestTitle = '订金支付编辑'
      await selectById(data.payment_id)
        .then(res => {
          this.form.payment_id = res.payment_id
          this.form.earnestMoney = res.earnest_money
          this.checkList = res.checkList
          this.form.payMethod = res.pay_method
          this.form.seriesId = res.series_id
          this.form.status = res.status
        })
      this.dialogFormVisible = true
    },
    // 增加和编辑
    saveClause() {
      this.form.payMethod = this.checkList
      this.$refs['form'].validate(valid => {
        if (valid) {
          const params = {
            isDealer: this.dialogType,
            payment_id: this.form.payment_id,
            earnestMoney: this.form.earnestMoney,
            payMethod: this.checkList,
            seriesId: this.form.seriesId,
            status: this.form.status
          }
          if (this.dialogType === 'add') {
            addNewEarnest(params).then(res => {
              this.$message({
                type: 'success',
                message: '订金新增成功!'
              })
              this.cancel()
              this.dialogFormVisible = false
              this.searchHandle()
            }).catch(err => {
              // this.$message({
              //   type: 'error',
              //   message: err.response.data.errorMsg
              // })
            })
          }
          if (this.dialogType === 'edit') {
            editEarnest(params, this.form.EMP_ID).then(res => {
              this.$message({
                type: 'success',
                message: '订金编辑成功!'
              })
              this.cancel()
              this.dialogFormVisible = false
              this.searchHandle()
            }).catch(err => {
              // this.$message({
              //   type: 'error',
              //   message: err.response.data.errorMsg
              // })
            })
          }
        }
      })
    }
  }
}

</script>

<style scoped>
.content{
  overflow-y: auto
}
.sele{
 width: 230px;
}
</style>
